import React from 'react';

export default function Footer({ type, handleUpdateType }) {
  return (
    <footer className="footer">
      <span className="todo-count">
        <strong>1</strong> 剩余
      </span>
      <ul className="filters">
        <li>
          <a
            className={type === 'all' ? 'selected' : ''}
            onClick={() => handleUpdateType('all')}
            href="#/"
          >
            全部
          </a>
        </li>
        <li>
          <a
            className={type === 'active' ? 'selected' : ''}
            onClick={() => handleUpdateType('active')}
            href="#/active"
          >
            未完成
          </a>
        </li>
        <li>
          <a
            className={type === 'completed' ? 'selected' : ''}
            onClick={() => handleUpdateType('completed')}
            href="#/completed"
          >
            已完成
          </a>
        </li>
      </ul>
      <button className="clear-completed">清除已完成</button>
    </footer>
  );
}
